<template>
	<view class="wrapper" :style="style">
		<u-tabs lineColor="#111111" :list="list" @change="change" :scrollable="scrollable" :current="active"
			:activeStyle="activeStyle"></u-tabs>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			current: {
				type: Number,
				default: 0
			},
			scrollable: {
				type: Boolean,
				default: true
			},
			border: {
				type: Boolean,
				default: true
			},
			shadow: {
				type: Boolean,
				default: false
			},
			radius: {
				type: String,
				default: '0'
			},
		},
		computed: {
			style() {
				let data = {
					borderRadius: this.radius,
					borderBottom: this.border ? '2rpx solid #E8EAEF' : 'unset',
					// boxShadow: this.shadow ? '0rpx 4rpx 24rpx 0rpx rgba(102, 111, 123, 0.1)' : 'unset'
				}
				return uni.$u.addStyle(data, 'string')
			},
			active: {
				get() {
					return this.current
				},
				set(val) {
					this.$emit('update:current', val)
				}
			},
		},
		data() {
			return {
				activeStyle: {
					color: '#111111'
				}
			}
		},
		methods: {
			change(e) {
				if (this.active === e.index) {
					return
				}
				this.active = e.index
				this.$emit('change', e)
			},
		}
	}
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		background-color: #fff;
		overflow: hidden;
	}
</style>